<template>
    <!-- 选择主数据视图 -->
    <div>
        <el-dialog
                title="选择视图"
                :visible.sync="showDialog"
                width="960px"
                :before-close="handleClose"
                append-to-body
                :show-close="false"
                class="com_main all-screen"
            >
                <template slot="title">
                    <div class="name fs16">选择视图</div>
                    <div class="el_form">
                <el-button @click="getDataList(1)">查询</el-button>
                <el-button @click="clearSearchAll">清空</el-button>
                <el-button @click="isSearch = !isSearch">
                    <span v-if="!isSearch">展开</span>
                    <span v-if="isSearch">收起</span>
                </el-button>
                <el-form
                        v-if="isSearch"
                        class="pr40 "
                        :model="searchForm"
                        label-width="120px"
                >
                    <el-row>
                        <el-col :span="8" class="el_col">
                            <el-form-item label="名称">
                                <el-input
                                        v-model="searchForm.name"
                                        placeholder="请输入名称"
                                        clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                    <i class="el-icon-close fs14 ml30" @click="showDialog = false"></i>
                    </div>
                </template>
            <!-- <div class="mb15 display-flex">
                <el-button @click="getDataList(1)">查询</el-button>
                <el-button @click="clearSearchAll">清空</el-button>
                <el-button @click="isSearch = !isSearch">
                    <span v-if="!isSearch">展开</span>
                    <span v-if="isSearch">收起</span>
                </el-button>

            </div> -->
           
            <el-table
                    :data="pageBean.data"
                    stripe
                    border class="tab-header"
                    ref="codecDialogTable"
                    style="width: 100%"
                    @select="selectRow"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="name" label="名称" width="150"></el-table-column>
                <el-table-column prop="type" label="类型" width="150">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.type === 'tile'">平铺</el-tag>
                        <el-tag type="warning" v-else>树形</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="linkTable" label="关联表" width="150"></el-table-column>
                <el-table-column prop="idField" label="id字段" width="150"></el-table-column>
                <el-table-column prop="remark" label="备注" min-width="150"></el-table-column>

            </el-table>
            <el-pagination
                    class="text-center mt10"
                    @size-change="sizeChangeHandle"
                    @current-change="currentChangeHandle"
                    :current-page="pageBean.current"
                    :page-sizes="[5, 10, 20, 50, 100]"
                    :page-size="pageBean.size"
                    :total="pageBean.total"
                    layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirmDialog">确认</el-button>
                <el-button @click="handleClose">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>


    import formViewService from "@/service/masterDataModel/FormViewService"


    export default {
        props: {
            optionType: {
                //当前弹窗是否单选
                type: String,
                default: "radio",
            },
        },
        components: {},
        data() {
            return {
                showDialog: false,
                isSearch: false,
                searchForm: {}, //查询条件
                checkedOption: [], //选中选项
                pageBean: {
                    current: 1,
                    size: 5,
                    data: [],
                    total: 0,
                },
            };
        },

        async created() {
        },
        methods: {
            /**
             * 初始化状态
             */
            async init(formObject, selectedItems) {
                if (formObject) {
                    this.formObject = formObject;
                }
                if (selectedItems && selectedItems.length > 0) {
                    this.checkedOption = selectedItems;
                } else {
                    this.checkedOption = [];
                }
                this.showDialog = true;
                await this.getDataList();
            },
            /**
             * 列表查询
             */
            async getDataList(type) {
                if (type == 1) {
                    this.pageBean.current = 1;
                }
                try {
                    let params = {
                        currentPage: this.pageBean.current,
                        pageSize: this.pageBean.size,
                        rootParentId: "1",
                        // parenId:"",
                        ...this.searchForm,
                    };
                    const resp = await formViewService.queryPage(params);
                    if (resp.status !== 200) {
                        throw new Error("接口请求失败, status: " + resp.status);
                    }
                    this.pageBean.total = resp.data.total;
                    this.pageBean.data = resp.data.records;
                    console.log(resp)
                    if (this.checkedOption && this.checkedOption.length > 0) {
                        //是否有选中项
                        this.toggleSelection();
                    }
                } catch (e) {
                    console.log(e);
                    this.$message({
                        showClose: true,
                        message: "加载列表失败，错误：" + e.message,
                        type: "error",
                    });
                }
            },
            /**
             * 当前页
             */
            currentChangeHandle(val) {
                this.pageBean.current = val;
                this.searchForm = {};
                this.getDataList();
            },

            /**
             * 每页数
             */
            sizeChangeHandle(val) {
                this.pageBean.size = val;
                this.pageBean.current = 1;
                this.getDataList();
            },

            /**
             * 查询条件重置刷新
             */
            clearSearchAll() {
                this.pageBean = {
                    current: 1,
                    size: 5,
                    data: [],
                    totalPage: 0,
                };
                this.searchForm = {};
                this.getDataList();
            },
            /**
             * 查看当前有没有提前选中
             */
            toggleSelection() {
                this.$nextTick(() => {
                    this.pageBean.data.forEach((element) => {
                        this.checkedOption.forEach((item) => {
                            if (item.tableName == element.tableName) {
                                this.$refs.codecDialogTable.toggleRowSelection(element);
                            }
                        });
                    });
                });
            },


            /**
             * 单选
             */
            selectRow(selection, row) {
                if (this.optionType == "radio") {
                    this.checkedOption = [];
                    this.checkedOption.push(row);
                    this.$refs.codecDialogTable.clearSelection();
                    this.$refs.codecDialogTable.toggleRowSelection(row);
                } else {
                    this.checkedOption = [];
                    this.checkedOption = this.$refs.codecDialogTable.selection;
                }
            },

            /**
             * 提交-保存访问地址配置
             */
            confirmDialog() {
                console.log(this.checkedOption,'checkedOption');
                this.$emit("confirmDialog", this.checkedOption);
                this.handleClose();
            },
            /**
             * 关闭弹出框
             */
            handleClose() {
                this.showDialog = false;
            },
        },

    };
</script>

<style lang="scss" scoped>
    /*.isTableCheckALL ::v-deep .el-table__header-wrapper .el-checkbox {*/
    /*  display: none;*/
    /*}*/
    .btn {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10px;
    }
    .el_form{
        display:flex;
        position:relative;
        margin-top:10px;
    }
    .el_col{
        width:300px;
    }
    .el-icon-close{
        position:absolute;
        right:0;
    }
</style>
